<template>
  <!-- 提示框  添加成功-->
  <q-dialog v-model="box.succeed" position="top">
    <q-card class="bg-primary text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">成功提示</div>
      </q-card-section>

      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8">{{ box.succeedStr }}</div>
        </div>
        <q-btn
            flat
            color="primary"
            @click="!box.isDialog"
            label="OK"
            v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <!-- 输入框部分 -->
        <div class="q-gutter-md row justify-around">
          <q-input
            v-model.trim="box.yesExport"
            type="text"
            hint="内销/外销"
            disable
          >
            <template v-slot:append>
              <q-icon
                :name="0 == '外销' ? 'directions_boat' : 'local_shipping'"
                size="80%"
              />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.customerPurchaseOrderId"
            type="text"
            hint="自定义订单号"
            disable
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input
            disable
            v-model.trim="box.supplierName"
            type="text"
            hint="供应商"
          >
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.inStockId"
            type="text"
            hint="入库单号"
            disable
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-input disable v-model.trim="box.planDate" type="date" hint="计划交期" />
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->
        <div style="height: 1px"></div>
        <div class="row q-gutter-md justify-around">
          <div class="q-gutter-md row items-start justify-around">
            <!-- <div   class=" q-gutter-md row justify-center ">
    <div class=" q-gutter-md  "> -->
            <q-btn-group>
              <q-btn
                icon="chevron_left"
                push
                ripple
                fab-max
                text-color="red-10"
              />
              <q-btn
                push
                label="提交"
                ripple
                fab-max
                text-color="red-10"
                @click="webInsertInStock"
              />
              <q-btn push label="审核" ripple text-color="teal-9" />
              <q-btn push label="特结" ripple fab-max text-color="purple-10" />
              <q-btn push label="反特结" ripple fab-max text-color="green-10" />
              <q-btn
                icon="chevron_right"
                push
                ripple
                fab-max
                text-color="red-10"
              />
            </q-btn-group>
          </div>

          <!-- 选择框 -->
          <div class="q-pa-md q-gutter-sm">
            <q-checkbox dense v-model="box.boxIsShow" label="BOX" color="red" />
            <q-checkbox
              dense
              v-model="box.SMRIsShow"
              label="SMR"
              color="teal"
            />
            <q-checkbox
              dense
              v-model="box.trayIsShow"
              label="TRAY"
              color="orange"
            />
          </div>
          <!-- 单选框 style=" color:#21BA45" -->
          <div class="q-pa-md q-gutter-sm text-weight-bold">
            <q-toggle
              v-model="box.isPrompts"
              checked-icon="check"
              unchecked-icon="clear"
              color="primary"
              label="开启任务列表"
            />
          </div>
        </div>

        <!-- 间距 -->

        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>

    <!-- 左侧任务表 -->
    <div   class="col-3 q-pa-sm bg-white">
      <!-- <q-resize-observer @resize="onResize"/> -->
      <div    class="row">
        <!-- 左侧筛选框 -->
        <div   v-show="box.isPrompts"   class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
          <!-- 列表 -->
          <q-card   class="no-border no-border">
            <!-- <q-tab-panels  class="bg-white"> -->
            <!-- all列表 -->
            <q-tab-panel name="all" class="q-pa-none full-height">
              <q-list class="">
                <q-item-label class="text-center q-pa-sm">
                  <q-input dense rounded outlined>
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </q-item-label>

                <q-item class="q-subtitle-1 q-pl-md">
                  <q-item-section>
                    <!-- list表格 -->
                    <q-table
                      :rows="box.unfinishedPurchaseOrderId"
                      :columns="listColumns"
                      style="height: 400px"
                      row-key="index"
                      virtual-scroll
                      :rows-per-page-options="[0]"
                      grid-header
                      flat
                      bordered
                      square
                      hide-header
                      hide-bottom
                      hide-no-data
                      hide-pagination
                      hide-selected-banner
                    >
                      <template v-slot:body="props">
                        <q-tr :props="props">
                          <!-- 产品大类 -->
                          <q-td
                            key="purchaseOrderId"
                            :props="props"
                            @click="clickList(props.row.purchaseOrderId)"
                          >
                            {{ props.row.purchaseOrderId }}
                          </q-td>
                        </q-tr>
                      </template>
                    </q-table>
                    <!-- 表格 -->
                  </q-item-section>
                </q-item>
              </q-list>
            </q-tab-panel>

            <!-- 单选框 -->
            <q-tabs dense class="bg-grey-4" align="justify">
              <q-item-label header class="text-center"
                >{{
                  box.unfinishedPurchaseOrderId.length
                }}
                单待入库</q-item-label
              >
            </q-tabs>
          </q-card>
        </div>
        <!-- 右侧表格 -->
        <div class="col-lg-15 q-pl-xs col-md-10 col-sm-10 col-xs-10">
          <q-card class="no-border no-border">
            <!-- 标题 -->
            <q-toolbar class="text-black">
              <q-btn round flat class="q-pa-sm">
                <q-avatar size="10px">
                  <img src="" />
                </q-avatar>
              </q-btn>

              <q-item class="q-subtitle-1 q-pl-md">
                <q-item-section>
                  <q-item-label lines="1"> 采购入库单</q-item-label>
                </q-item-section>
              </q-item>

              <q-space />

              <q-btn round flat icon="star_outline" color="yellow"> </q-btn>
              <q-btn round flat icon="edit" />
            </q-toolbar>
            <q-separator></q-separator>
            <!-- 表格 -->
            <div>
              <!-- 表格 -->
              <q-table
                :rows="box.UnfinishedPurchaseOrderDetails"
                :columns="tabColumnsInsert"
                virtual-scroll
                hide-pagination
                :rows-per-page-options="[0]"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div class="title_font">{{ col.label }}</div>
                    </q-th>
                  </q-tr>
                </template>

                <!-- 表体部分 -->
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <!-- 行号-->
                    <q-td key="id" :props="props"> {{ props.row.id }}</q-td>
                    <!--  采购订单号-->
                    <q-td key="purchaseOrderId" :props="props">
                      {{ props.row.purchaseOrderId }}</q-td
                    >
                    <!-- 产品名称 -->
                    <q-td key="goodsName" :props="props">
                      {{ props.row.goodsName }}</q-td
                    >
                    <!-- 产品材质 -->
                    <q-td key="goodsMaterial" :props="props">
                      {{ props.row.goodsMaterial }}</q-td
                    >
                    <!-- 产品类型 -->
                    <q-td key="goodsStyle" :props="props">
                      {{ props.row.goodsStyle }}</q-td
                    >
                    <!-- 产品规格 -->
                    <q-td key="goodsSize" :props="props">
                      {{ props.row.goodsSize }}</q-td
                    >
                    <!-- 总订购数量 -->
                    <q-td key="sumPOQuantity" :props="props">
                      <q-badge color="indigo">
                        {{ props.row.sumPOQuantity }}
                      </q-badge>
                    </q-td>

                    <!-- 已入库数量 -->
                    <q-td key="alreadyInStockQuantity" :props="props">
                      <q-badge color="pink">
                        {{ props.row.alreadyInStockQuantity    }}
                      </q-badge>
                    </q-td>
                    <!-- 待入库数量 -->
                    <q-td key="excessInStockQuantity" :props="props">
                      <q-badge color="primary">
                        {{ props.row.excessInStockQuantity    }}
                      </q-badge>
                    </q-td>
                    <!-- 本次入库数量 -->
                    <q-td key="inStockQuantity" :props="props">
                      <q-badge color="teal">
                        {{ props.row.inStockQuantity }}
                      </q-badge>

                      <q-popup-edit v-model="box.inStockQuantity">
                        <q-input
                          v-model="props.row.inStockQuantity"
                          dense
                          autofocus
                          bottom-slots
                          @blur.native.capture="isValid(props.row)"
                        />
                      </q-popup-edit>
                    </q-td>

                    <!-- 订单备注 -->
<!--                    <q-td key="id" :props="props">-->
<!--                      {{ props.row.purchaseOrderCustomerMark }}-->
<!--                    </q-td>-->
                    <!-- 入库备注 -->
<!--                    <q-td key="id" :props="props">-->
<!--                      {{ props.row.inStockCustomerMark }}-->
<!--                      <q-popup-edit v-model="box.inStockCustomerMark">-->
<!--                        <q-input-->
<!--                          v-model="props.row.inStockCustomerMark"-->
<!--                          dense-->
<!--                          autofocus-->
<!--                        />-->
<!--                      </q-popup-edit>-->
<!--                    </q-td>-->
                  </q-tr>
                </template>
              </q-table>
              <!-- 表格 -->
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRaw, onMounted } from "vue";

import { addAnyID } from "../../utils/goodsTools";
import { tabColumnsInsert } from "../../API/InStock/inStockData";
import {
  getMaxInStockId,
  getUnfinishedPurchaseOrderId,
  getUnfinishedPurchaseOrderDetails,
  insertInStock
} from "../../API/InStock/inStockAPI";
export default {
  data() {
    //获取未完成采购订单
    onMounted(function () {
      bb();
      async function bb() {
        var res = await getUnfinishedPurchaseOrderId();
        console.log("未完成入库订单");
        console.log(res);
        box.unfinishedPurchaseOrderId = res.data;
      }
    });
    //判断入库数量是否超过订单数量
    function isValid(r) {
      // console.log(toRaw(r));
      // console.log(toRaw(r).purchaseOrderQuantity)
      if (
        toRaw(r).inStockQuantity - toRaw(r).excessInStockQuantity  >  0
      ) {
        alert("多了");
        box.UnfinishedPurchaseOrderDetails[toRaw(r).id-1].inStockQuantity=null
      }
    }
    function clickList(POid) {
      let clickListPOid = JSON.stringify({ POid: POid }); // 定义字典
      getUnfinishedPurchaseOrder(clickListPOid);
      async function getUnfinishedPurchaseOrder(clickListPOid) {
        var res = await getUnfinishedPurchaseOrderDetails(clickListPOid);
        console.log("未完成入库订单明细");
        console.log(res);
        console.log(res.data[0]);
        box.yesExport=res.data[0].yesExport;
        box.planDate=res.data[0].planDate.split("T")[0];
        box.purchaseOrderId=res.data[0].purchaseOrderId;
        box.customerPurchaseOrderId=res.data[0].customerPurchaseOrderId;
        box.supplierName=res.data[0].supplierName;
        res.data.forEach((item, index) => {
          item["id"] = index + 1;
          item["inStockQuantity"] = null;
          // item["inStockCustomerMark"] = null;
        });
        box.UnfinishedPurchaseOrderDetails = res.data;
      }

      webGetMaxInStockId();
      async function webGetMaxInStockId() {
        var res = await getMaxInStockId();
        if (res.data.length>0){
          box.inStockId = addAnyID(res.data[0].inStockId, "IN");
        }else {
          box.inStockId = addAnyID("IN20240000000", "IN");
        }
      }


    }
    //提交入库信息
    function webInsertInStock() {
      // 第一步 检查信息是否输入完整
      let insertData=  box.UnfinishedPurchaseOrderDetails.filter((item,index)=>{
        console.log(item);
        item.inStockId=box.inStockId
        item.s =Number(item.sumPOQuantity)- Number(item.excessInStockQuantity)- Number(item.inStockId)
        // delete item.inStockIndex
        // delete item.goodsName
        // delete item.handleDate
        // delete item.handleNameID
        return item.inStockQuantity !==null
      })

      let JSONinsertData = JSON.stringify(insertData);
      console.log(JSONinsertData);
      dd(JSONinsertData);
      let res;
      async function dd(JSONinsertData) {
        res = await insertInStock(JSONinsertData);
        console.log(res);
        if (res.code==200){
          box.succeed = true;
          box.succeedStr = "成功添加了  "+ insertData.length + "条记录";
          box.UnfinishedPurchaseOrderDetails.length = 0;
        }

      }
      // if ( typeof res ==='number' ||typeof res === "undefined"  ){
      //   console.log(res);
      //   box.succeed = true;
      //   box.succeedStr = "成功添加了  "+ insertData.length + "条记录";
      //   box.UnfinishedPurchaseOrderDetails.length = 0;
      // }else {
      //   box.succeed = true;
      //   box.succeedStr = "提交失败!~";
      //   console.log(res);
      //   console.log('----------------------------------------');
      //   console.log(typeof res);
      // }
    }

    return {
      box,
      // listColumns,
      tabColumnsInsert,
      webInsertInStock,
      clickList,
      isValid,
    };
  },
};

const box = reactive({
  unfinishedPurchaseOrderId: [],
  UnfinishedPurchaseOrderDetails: [],
  insertInStockData: [],
  inStockId: "",
  inStockQuantity: 0,
  inStockCustomerMark: "",
  yesExport: "",
  planDate: "",
  purchaseOrderId: "",
    customerPurchaseOrderId: "",
  supplierName: "",
  isPrompts: true,
});
</script>
<style>
.title_font {
  color: rgb(17, 17, 19);
  font-size: 14px;
  font-weight: bolder;
}
.but_float {
  margin-right: 2%;
  float: right;
}

.title_font2 {
  font-size: 18px;
  font-weight: bolder;
}
.bar_width {
  width: 80%;
}
</style>
